import "./index.scss";
import SplitText from "@/components/reactBits/splitText";
import StarBorder from "@/components/reactBits/starBorder";
import HomeBrowser from "./components/browser";
import { Play } from "lucide-react";
import { useEffect } from "react";

const HomePage = () => {
  const handleAnimationComplete = () => {
    console.log("All letters have animated!");
  };

  useEffect(() => {}, []);

  return (
    <>
      <div className="home_page_wrap">
        <div className="content_box">
          <span className="desc">
            <SplitText
              text="全新一代"
              className="text-2xl font-semibold text-center home_desc"
              delay={100}
              duration={0.6}
              ease="power3.out"
              splitType="chars"
              from={{ opacity: 0, y: 40 }}
              to={{ opacity: 1, y: 0 }}
              threshold={0.1}
              rootMargin="-100px"
              textAlign="center"
              onLetterAnimationComplete={handleAnimationComplete}
            />
            <SplitText
              text="Web Video"
              className="text-2xl font-semibold text-center home_desc"
              delay={100}
              duration={1}
              ease="power3.out"
              splitType="chars"
              from={{ opacity: 0, y: 40 }}
              to={{ opacity: 1, y: 0 }}
              threshold={0.1}
              rootMargin="-100px"
              textAlign="center"
              onLetterAnimationComplete={handleAnimationComplete}
            />
          </span>

          <HomeBrowser />

          <StarBorder
            as="button"
            className="once_start_btn"
            color="cyan"
            speed="2s"
          >
            <Play className="start_icon" size={18} />
            <span className="text">码上开始!</span>
          </StarBorder>
        </div>
      </div>
    </>
  );
};

export default HomePage;
